<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../components/polymer/polymer.html">

<polymer-element name="x-button-example" noscript>
  <template>
    <style>
      :host {
        opacity: 0.6;
        transition: opacity 400ms ease-in-out;
      }
      :host(:hover) {
        opacity: 1;
      }
      :host(:active) {
        position: relative;
        top: 3px;
        left: 3px;
      }
    </style>
    <button><content></content></button>
  </template>
</polymer-element>

<polymer-element name="x-bgchange-example" on-click="{{changeBg}}">
  <template>
    <style>
      :host {
        display: inline-block;
        padding: 5px;
        background: red;
        color: white;
      }
    </style>
    <div>Click me</div>
  </template>
  <script>
    Polymer('x-bgchange-example', {
      changeBg: function() {
        this.style.background = 'blue'; 
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-foo-example2">
  <template>
    <style>
      :host { display: block; }
    </style>
    <div class="red">Shadow DOM: shouldn't be red (under native Shadow DOM)</div>
    <content select="div"></content>
  </template>
  <script>
    Polymer('x-foo-example2');
  </script>
</polymer-element>

<polymer-element name="x-foo-shadow" noscript>
  <template>
    <style>
      :host { display: block; }
    </style>
    <p>I am red!</p>
    <content></content>
  </template>
</polymer-element>